<template>
  <div class="fullCalendarCont">
    <el-date-picker
      size="small"
      style="width: 144px"
      v-model="selectDate"
      type="date"
      placeholder="选择时间"
      @change="changeDate"
    >
    </el-date-picker>
    <full-calendar :config="config" :events="events" ref="calendar">
    </full-calendar>
  </div>
</template>
<script>
import { FullCalendar } from "vue-full-calendar";
import "fullcalendar/dist/fullcalendar.css";
import 'bootstrap/dist/css/bootstrap.css';
 import '@fortawesome/fontawesome-free/css/all.css';

import tippy from "tippy.js"; //引入 tippy.js
import "@/assets/css/dist/tippy.css"; //引入 tippy.js
import "@/assets/css/themes/light.css"; //引入主题
import "@/assets/css/animations/scale.css";

import "./data";
export default {
  components: { FullCalendar },
  mounted() {
    for (let i = 0; i < 15; i++) {
      this.events.push(this.events[6]);
    }
  },
  data() {
    return {
      selectDate: "", //日期选择器选中的月份
      events: [
        {
          start: '2021-11-07 10:00:00',
          end: '2021-11-07 16:00:00',
          color: '#ff9f89'
        },
        {
          id: 1,
          title: "出差",
          start: "2021-11-12", // 事件开始时间
          end: "2021-11-15 09:00:00", // 事件结束时间
          className: "blue",
        },
        {
          id: 2,
          title: "春游",
          start: "2021-11-12 09:00:00",
          end: "2021-11-15 09:00:00",
          display: 'background',
          //color: '#ff9f89',
          className: "red",
        },
        {
          id: 3,
          title: "春游2",
          start: "2021-11-13 09:00:00",
          allDay:true
        },
        {
          id: 4,
          title: "春游3",
          start: "2021-11-13 09:00:00",
          display: 'inverse-background'
        },
        {
          id: 5,
          title: "春游4",
          start: "2021-11-13 09:00:00",
          end: "2020-07-26 16:00:00",
        },
        {
          id: 7,
          title: "春游2",
          start: "2021-11-13 09:00:00",
        },
        {
          title: "春游2",
          start: "2021-11-13 09:00:00",
        },
      ],
      config: {
        firstDay: "0", //--以周日为每周的第一天
        buttonText: { today: "今天", month: "月", week: "周", day: "日" ,list:"列表年"},
        customButtons: {
          myCustomButton: {
              text: '自定义按钮',
              click: function() {
                  alert('点击了自定义按钮!');
              }
          }
        },
        header: {
          left: "today myCustomButton",
          center: "prevYear, prev, title, next, nextYear",
          right:"month,agendaWeek,agendaDay,listYear,listMonth,listDay"
        },
        themeSystem: 'bootstrap4',

        theme: false, //--是否允许使用jquery的ui主题
        isRTL: false, //--设置为ture时则日历从右往左显示
        weekends: true, //--是否显示周末，设为false则不显示周六和周日
        hiddenDays: [], //--隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
        weekNumbers: false, //--	是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
        height: 650, //--设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。 auto
        aspectRatio: 1.35, //--设置日历单元格宽度与高度的比例。
        handleWindowResize: true, //--	是否随浏览器窗口大小变化而自动变化。
        slotLabelFormat: "H:mm", // axisFormat 'H(:mm)'
        windowResize: this.windowResize, //当浏览器窗口变化时触发
        slotEventOverlap: true, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
        //slotLabelInterval:1,
        views: {
          month: {
            titleFormat: "YYYY年MMM",
          },
          day: {
            titleFormat: "YYYY年MMMDD日 dddd",
          },
        },
        monthNames: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        monthNamesShort: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        dayNames: [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ],
        dayNamesShort: [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ],
        slotDuration: "00:30:00",
        lazyFetching: false,
        minTime: "00:00",
        maxTime: "24:00",
        locale: "zh-cn",
        editable: false, //--是否允许修改事件
        selectable: false, //--是否允许用户单击或者拖拽日历中的天和时间隙
        eventLimit: 3, //--限制一天中显示的事件数，默认false
        displayEventEnd: false, //是否显示结束时间
        allDaySlot: false, //在agenda视图模式下，是否在日历上方显示all-day(全天)
        allDayText: "全天", //定义日历上方显示全天信息的文本
        navLinks: true, //允许天/周名称是否可点击
        defaultView: "month", //--显示默认视图
        showNonCurrentDates:true, //--在月视图中，是否显示上个月和下个月的日期
        eventClick: this.eventClick, //点击事件
        dayClick: this.dayClick, //点击日程表上面某一天
        eventMouseover: this.eventMouseover,
        eventMouseout: this.eventMouseout,
        eventRender: this.eventRender,
        select: this.select,
        unselect: this.unselect,
      },
    };
  },
  methods: {
    eventMouseover(calEvent, jsEvent, view) {
      console.log("eventMouseover");
      console.log(calEvent)
      let content = ""; //content中可以直接设置悬浮框中内容的样式
      content = "<div style=''>" + calEvent.title + "</div>";
      content =
        content + "<div style=''>" + "开始时间: " + calEvent.start._i + "<div>";
         let endTime = calEvent.end?calEvent.end._i:calEvent.start._i
      content =
        content + "<div style=''>" + "结束时间: " + endTime + "<div>";
        let subTime = calEvent.end? (calEvent.end -calEvent.start)/1000: 1*24*60*60
        var days = parseInt(subTime/86400); // 天  24*60*60*1000 
   	    var hours = parseInt(subTime/3600)-24*days;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
   	    var minutes = parseInt(subTime%3600/60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
   	
      content = content + "<div style=''>" + "持续天数: " + days+'天'+hours+'小时'+minutes+'分' + "<div>";
      tippy(jsEvent.currentTarget, {
        content: content, //悬浮框展示的内容
        //theme: "light", //悬浮框主题，默认主题中的light主题（白底黑字）
        theme: 'tomato',    //自定义主题，颜色在style中设置
        //placement: 'right-end',
        allowHTML: true, //为true的时候，可以识别content中的html
      });
    },
    eventMouseout(event) {
      console.log("eventMouseout");
      //event.className = ['blue']
      //this.$refs.calendar.fireMethod('updateEvent', event)
    },
    windowResize(view) {
      console.log("windowResize");
      console.log(this.$refs.calendar)
    },
    select() {
      console.log("选中");
    },
    changeDate() {
      this.$refs.calendar.fireMethod("gotoDate", this.selectDate);
    },
    // 点击事件
    eventClick(event, jsEvent, view) {
      console.log("eventClick", event);
      //event.eventBackgroundColor = 'black'
      event.className = ["black"];
      //this.$refs.calendar.fireMethod('updateEvent', event)
    },
    // 点击当天
    dayClick(event, allDay, jsEvent, view) {
      console.log("event", event);
      console.log("allDay", allDay);
      console.log("jsEvent", jsEvent);
      console.log("view", view);
    },
    eventRender: function (event, element) {
      //console.log('eventRender',event)
      element.find(".fc-title").attr("title", event.title);
    },
  },
};
</script>
<style>
.red {
  background: red;
}
.blue {
  background: blue;
}
.black {
  background: black;
}
thead, tbody, tfoot, tr, td, th {
    border-color: #63d8f0;
    border-style: solid;
    border-width: 0;
}
.tippy-box[data-theme~="tomato"] {
  background-color: tomato;
  color: yellow;
}

.tippy-box[data-theme~="tomato"][data-placement^="top"] > .tippy-arrow::before {
  border-top-color: tomato;
}
</style>
